<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-box">
			<view v-for="(item,index) in navBarData" :key="item.id" class="category"
				:class="navBarIndex===index?'active':''" @click="navChange(index)">{{item.classname}}</view>
		</scroll-view>

		<view class="box">
			<view class="content">
				<view class="item" v-for="(item,index) in newsList" :key="item.id">
					<ListItem :item=item @click.native='openDetail(item)' page='index'></ListItem>
				</view>
			</view>
		</view>

		<view class="nodata" v-if="newsList.length==0">
			<image src="../../static/images/pic1.jpeg"></image>
		</view>

		<view class="tip">
			<view class="loading" v-show="loading==1">
				数据加载中...
			</view>
			<view class="no-more-data" v-show="loading==2">
				没有更多了~~
			</view>
		</view>
	</view>
</template>

<script>
	import {parseTime } from '@/utils/time.js'
	export default {
		data() {
			return {
				navBarIndex: 0,
				navBarData: [],
				newsList: [],
				currentPage: 1,
				loading: 0, //0默认 1加载中 2没有更多
				num: 6,
				// page:'index',
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewsList();

		},
		//触底加载新条目
		onReachBottom() {
			if (this.loading == 2) return
			this.currentPage++;
			let id = this.navBarData[this.navBarIndex].id;
			this.getNewsList(id)

		},
		methods: {
			getNavData() {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: (res) => {
						if (res.statusCode == 200) {
							this.navBarData = res.data

						}
					}
				})
			},
			getNewsList(id = 50) {

				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data: {
						cid: id,
						page: this.currentPage,
						num: this.num,

					},
					success: (res) => {
						if (res.data.length != 0) {
							if (res.data.length < this.num) {
								this.loading = 0
							} else {
								this.loading = 1;
							}

							this.newsList = this.newsList.concat(res.data)
							return
						}

						this.loading = 2;
					},
					fail(err) {
						console.log('err:', err)
					}
				})
			},
			//更改分类事件	
			navChange(index) {
				this.newsList.length = 0;
				this.currentPage = 1;
				this.navBarIndex = index;
				let id = this.navBarData[index].id;
				this.getNewsList(id)
			},
			//打开新闻详情
			openDetail(item) {
				this.saveHistory(item);
				uni.navigateTo({
					url: `../../pages/detail/detail?id=${item.id}&classid=${item.classid}`
				})
			},
			// 将浏览记录本地化存储
			saveHistory(item) {
				let historyData = uni.getStorageSync('historyData') || [];
				let index = historyData.findIndex(ele=>ele.id==item.id)
				if(index!=-1){
					historyData.splice(index,1)
				}
				item.historyTime = parseTime(Date.now())
				historyData.unshift(item)
				//最多保留十条历史数据
				if(historyData.length>10) historyData.pop()
				uni.setStorageSync('historyData', historyData)
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		.scroll-box {
			z-index: 10;
			touch-action: none;
			position: fixed;
			left: 0;
			top: var(--window-top);
			white-space: nowrap;
			height: 100rpx;
			background-color: #f7f8fa;

			// 穿透 设置scroll-view组件 隐藏横向滚动条
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
			}

			.category {
				display: inline-block;
				font-size: 40rpx;
				width: 150rpx;
				height: 100%;
				line-height: 100rpx;
				text-align: center;


				&.active {
					color: #31C27C;

				}
			}
		}

		.box {
			padding: 20rpx;
			padding-top: 120rpx;

			.content {

				// width: 100%;
				overflow: hidden;

				// padding-top: 120rpx;
				.item {
					padding: 20rpx;
					width: 100%;
					border-bottom: 1rpx dashed gray;
				}
			}
		}

		.nodata {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 500rpx;

			}
		}

		.tip {
			width: 100%;
			text-align: center;
			margin: 20rpx auto;
			font-size: 20rpx;
		}

	}
</style>
